import QtQuick
import QtMultimedia
import QtQuick.Controls
import Qt.labs.platform

Rectangle {
    id: importVideoRect
    width: 640
    height: 480
    clip: true
    visible: false
    color: mBackColor

    signal videoFileProcessOver() // 视频文件处理完毕信号
    signal actionErrorTips(var tips)
    // 一些组件的固定尺寸
    property real fixedWidth: 100
    property real fixedHeight: 100

    property color mBackColor: "#34393e"
    property color mTextColor: "#e1e4e8"

    property var helpContent: qsTr(" \
1. 选择取色模式，\"包含头尾\"从0开始取色；\"不包含头尾\"不从0开始取色\n \
2. 选择一个视频文件进行预览，默认以视频高度作为灯珠边长计算灯珠数量\n \
3. 左键播放区域暂停或播放视频，右键播放区域弹出菜单选项\n \
4. 根据需求修改灯珠数量，点击导入将视频文件生成灯效 \
")

    // 视频播放或暂停 true:播放 false:暂停
    function videoPlayPause(flag) {
        if(flag) mediaPlayer.play()
        else mediaPlayer.pause()
    }

    Connections {
        target: myHandle
        // 链接C++的视频文件打开后信号
        function onVideoFileOpened(filePath) {
            mediaPlayer.setSource(filePath)
            videoPlayPause(true)
            // 设置视频信息显示
            videoInfoModel.setProperty(0, "infoText", myHandle.getMyProperty("fWidth").toString())
            videoInfoModel.setProperty(1, "infoText", myHandle.getMyProperty("fHeight").toString())
            videoInfoModel.setProperty(2, "infoText", myHandle.getMyProperty("fRate").toString())
            videoInfoModel.setProperty(3, "infoText", myHandle.getMyProperty("fNum").toString())
            ledNumEdit.inputText = myHandle.getMyProperty("lNum")
//            console.log("file path changed")
        }
        // 链接C++的视频文件处理后信号
        function onVideoFileProcessed() {
            progressBar.cpbValue = 1 // 进度条到达终点
        }
    }

    CustomHeaderBarClose {
        id: headerBar
        x: 0
        y: 0
        width: parent.width
        height: 34
        chbTitleText: qsTr("视频导入预览")
        chbHelpText: helpContent

        onClosePageBtnClicked: {
            parent.visible = false
        }
    }

    Rectangle {
        id: mediaPlayerItem
        anchors.top: headerBar.bottom
        anchors.bottom: videoInfoItem.top
        anchors.left: parent.left
        anchors.right: parent.right
        color: "#2e2f30"

        MediaPlayer {
            id: mediaPlayer
            videoOutput: videoOutput
            loops: MediaPlayer.Once

            onPositionChanged: {
                // 视频当前播放位置变化则改变滑动条位置
                videoSlider.value = mediaPlayer.position / mediaPlayer.duration
            }
        }

        VideoOutput {
            id: videoOutput
            width: parent.width
            anchors.top: parent.top
            anchors.bottom: videoSlider.top
        }

        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton

            onClicked: function(mouse) {
                if(mouse.button === Qt.LeftButton) {
                    focus = true
                    // 视频播放状态变化则改变图标显示
                    if(mediaPlayer.playbackState === MediaPlayer.PlayingState) {
                        videoPlayPause(false)
                    } else {
                        videoPlayPause(true)
                    }
                } else if(mouse.button === Qt.RightButton) {
                    playPauseMenu.open(mouse.x, mouse.y)
                }
            }
        }

        CustomMenu1 {
            id: playPauseMenu
            width: 120
            height: 30
            color: "#34393e"
            cmTextColor: "#e1e4e8"
            cmFontSize: 14
            cmItemHeight: height / menuText.length

            property var menuText: ["循环播放"]

            Component.onCompleted: {
                for(var i = 0; i < menuText.length; i++) {
                    playPauseMenu.cmListModel.set(i, {"mText": menuText[i]})
                }
            }

            onCustomMenuClicked: function(index) {
                switch(index) {
                    case 0:
                        if(mediaPlayer.loops === MediaPlayer.Infinite) {
                            mediaPlayer.loops = MediaPlayer.Once // 循环1次
                            playPauseMenu.cmListModel.set(0, {"mText": qsTr("循环播放")})
                        } else if(mediaPlayer.loops === MediaPlayer.Once) {
                            mediaPlayer.loops = MediaPlayer.Infinite // 无限循环
                            playPauseMenu.cmListModel.set(0, {"mText": qsTr("单次播放")})
                        }
                        break;
                }
            }
        }

        Slider {
            id: videoSlider
            width: parent.width
            height: 30
            anchors.bottom: parent.bottom
            stepSize: 0.01
            snapMode: Slider.SnapAlways

            onPressedChanged: {
                // 按下或松开滑动条就暂停视频
                if(pressed) mediaPlayer.pause()
                else mediaPlayer.play()
            }

            onValueChanged: {
                // 滑动条位置变化则改变视频当前播放位置
                mediaPlayer.position = videoSlider.value * mediaPlayer.duration
            }
        }
    }

    Rectangle {
        id: videoInfoItem
        height: fixedHeight
        anchors.bottom: progressBar.top
        anchors.left: parent.left
        anchors.right: fileHandleItem.left
        anchors.bottomMargin: 4
        color: "transparent"

        ListModel {
            id: videoInfoModel
            ListElement { infoTitle: qsTr("视频宽度:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("视频高度:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("视频帧率:"); infoText: qsTr("0") }
            ListElement { infoTitle: qsTr("视频帧数:"); infoText: qsTr("0") }
        }

        GridView {
            id: videoInfo
            anchors.fill: parent
            clip: true
            interactive: false

            cellWidth: width / 2
            cellHeight: height / 3

            model: videoInfoModel
            delegate: videoInfoDelegate

        }

        Component {
            id: videoInfoDelegate

            TitleTextInput {
                width: videoInfo.width / 2
                height: videoInfo.height / 3
                titleText: infoTitle
                titleWidth: 90
                textColor: mTextColor
                textSize: 16
                inputBackColor: mBackColor
                inputBorderWidth: 0
                inputText: infoText
                inputReadOnly: true
            }
        }

        TitleTextInput {
            id: ledNumEdit
            width: videoInfo.width / 2
            height: videoInfo.height / 3
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            titleText: qsTr("灯珠数量:")
            titleWidth: 90
            textColor: mTextColor
            textSize: 16
            inputBackColor: mBackColor
            inputBorderWidth: 1
            inputBorderColor: "#888888"
            inputText: "0"
            inputValidator: RegularExpressionValidator { regularExpression: /[0-9]+/ } // 文本验证器 仅可输入数字
        }

        Text {
            id: ledNumModeTitle
            width: 90
            height: videoInfo.height / 3
            anchors.left: ledNumEdit.right
            anchors.bottom: parent.bottom
            font.pixelSize: 16
            text: qsTr("取色模式:")
            color: mTextColor
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        AsComboBox {
            id: ledNumMode
            height: videoInfo.height / 3
            anchors.left: ledNumModeTitle.right
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.rightMargin: 10
            textRole: "key"
            model: ListModel {
                ListElement { key: qsTr("包含头尾") }
                ListElement { key: qsTr("不包含头尾") }
            }
            backDisplay: true
        }
    }

    Rectangle {
        id: fileHandleItem
        width: fixedWidth
        height: fixedHeight
        anchors.top: videoInfoItem.top
        anchors.bottom: progressBar.top
        anchors.right: parent.right
        color: "transparent"

        Column {
            id: fileHandleColumn
            anchors.fill: parent
            spacing: 10
            topPadding: 16
            leftPadding: (parent.width - openFileBtn.width) / 2

            AsButton {
                id: openFileBtn
                width: 70
                height: 30
                text: qsTr("选择")
                font.pixelSize: 14
                borderWidth: 1
                backColor: mBackColor
                textColor: mTextColor
                itemRadius: 8

                onClicked: {
                    // 按下则执行C++方法 导入和打开视频文件
                    myHandle.importAndOpenVideo(ledNumMode.currentIndex)
                }
            }

            AsButton {
                id: processFileBtn
                width: 70
                height: 30
                text: qsTr("导入")
                font.pixelSize: 14
                borderWidth: 1
                backColor: mBackColor
                textColor: mTextColor
                itemRadius: 8

                onClicked: {
                    progressBar.reset()
                    // 执行C++方法 处理视频文件
                    var ledNum = Number(ledNumEdit.inputText)
                    if(ledNum && Number(videoInfoModel.get(3).infoText)) {
                        progressBar.cpbValue = 0.9
                        myHandle.setMyProperty("lNum", ledNum)
                        myHandle.processVideo(ledNumMode.currentIndex)
                    } else {
                        actionErrorTips(qsTr("请先选择有效文件"))
                    }
                }
            }
        }
    }

    CustomProgressBar1 {
        id: progressBar
        width: parent.width
        height: 16
        anchors.bottom: parent.bottom
        cpbForeGradient: 100
//        cpbForeColor: "#1f2428"
        cpbBackColor: "#44484d"
        cpbTextColor: "#FFFFFF"

        onAnimationOver: {
            // 释放视频文件处理完毕信号
            videoFileProcessOver()
        }
    }
}
